import { useMemo } from 'react'
import { LegendComponent } from 'echarts/components'

function useLegend(chart) {
  const { enabled, position } = chart?.legend || {}
  const legend = useMemo(() => {
    const show = enabled
    if (!enabled) return { legend: { show } }
    const positions = {
      top: {
        left: 'center',
        top: 0
      },
      bottom: {
        left: 'center',
        bottom: 0
      },
      left: {
        left: 0,
        top: 'middle',
        orient: 'vertical'
      },
      right: {
        right: 0,
        top: 'middle',
        orient: 'vertical'
      }
    }
    return { legend: { ...positions[position], show } }
  }, [chart])

  return { legend, legendComponent: enabled ? [LegendComponent] : [] }
}

export default useLegend
